<html lang="en">
     <head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Open on hoverintent</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion({
      event: "click hoverintent"
    });
  });
 
  /*
   * hoverIntent | Copyright 2011 Brian Cherne
   * http://cherne.net/brian/resources/jquery.hoverIntent.html
   * modified by the jQuery UI team
   */
  $.event.special.hoverintent = {
    setup: function() {
      $( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    teardown: function() {
      $( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
    },
    handler: function( event ) {
      var currentX, currentY, timeout,
        args = arguments,
        target = $( event.target ),
        previousX = event.pageX,
        previousY = event.pageY;
 
      function track( event ) {
        currentX = event.pageX;
        currentY = event.pageY;
      };
 
      function clear() {
        target
          .unbind( "mousemove", track )
          .unbind( "mouseout", clear );
        clearTimeout( timeout );
      }
 
      function handler() {
        var prop,
          orig = event;
 
        if ( ( Math.abs( previousX - currentX ) +
            Math.abs( previousY - currentY ) ) < 7 ) {
          clear();
 
          event = $.Event( "hoverintent" );
          for ( prop in orig ) {
            if ( !( prop in event ) ) {
              event[ prop ] = orig[ prop ];
            }
          }
          // Prevent accessing the original event since the new event
          // is fired asynchronously and the old event is no longer
          // usable (#6028)
          delete event.originalEvent;
 
          target.trigger( event );
        } else {
          previousX = currentX;
          previousY = currentY;
          timeout = setTimeout( handler, 100 );
        }
      }
 
      timeout = setTimeout( handler, 100 );
      target.bind({
        mousemove: track,
        mouseout: clear
      });
    }
  };
  </script>
</head>
<body>
    
<div id="onglets">
  <ul>
    <li><a href="#onglet-1">Informations Personnelles</a></li>
    <li><a href="#onglet-2">informations professionnelles</a></li>
    <li><a href="#onglet-3">Rémunération Théorique</a></li>
  </ul>
  <div id="onglet-1">
 
<div id="accordion">
  <h3>Adresse</h3>
  <div>
    <p>
    Section1
    </p>
  </div>
  <h3>Situation familiale</h3>
  <div>
    <p>
    Section2
    </p>
  </div>
  <h3>Coordonnées personnelles</h3>
  <div>
    <p>
    Section3
    </p>
  </div>
  <h3>Coordonnées en cas d'urgence</h3>
  <div>
    <p>
    Section4
    </p>
  </div>
  <h3>Dépendants</h3>
  <div>
    <p>
    Section5
    </p>
  </div>
  <h3>Etat physique</h3>
  <div>
    <p>
    Section6
    </p>
  </div>
</div>
      
  </div>
 
        
    <div id="onglet-2">
 
<div id="accordion">
  <h3>Spécification du poste</h3>
  <div>
    <p>
    Section1
    </p>
  </div>
  <h3>Permis</h3>
  <div>
    <p>
    Section2
    </p>
  </div>
  <h3>Clauses contractuelles</h3>
  <div>
    <p>
    Section3
    </p>
  </div>
  <h3>Expériences</h3>
  <div>
    <p>
    Section4
    </p>
  </div>
  <h3>Diplomes</h3>
  <div>
    <p>
    Section5
    </p>
  </div>
  <h3>Certifications</h3>
  <div>
    <p>
    Section6
    </p>
  </div>
  <h3>Compétences</h3>
  <div>
    <p>
    Section7
    </p>
  </div>
</div>     
  </div>
      
  </div>
    
  <div id="onglet-3">
<div id="accordion">
  <h3>Avantages en nature</h3>
  <div>
    <p>
    Section1
    </p>
  </div>
  <h3>Salaire de base</h3>
  <div>
    <p>
    Section2
    </p>
  </div>
  <h3>Primes transport</h3>
  <div>
    <p>
    Section3
    </p>
  </div>
  <h3>Primes mensuelles</h3>
  <div>
    <p>
    Section4
    </p>
  </div>
  <h3>Primes annuelles</h3>
  <div>
    <p>
    Section5
    </p>
  </div>
  <h3>Augmentations</h3>
  <div>
    <p>
    Section6
    </p>
  </div>
</div>     
  </div>
      
  </div>
</div>

<script>
  $(function() {
    $('#onglets').tabs();
  });
</script>

</body>

</html>